<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    Rem初始化-->
    <script src="static/js/RemInitialize.js"></script>
</head>
<body>
<div style="width: 0.8rem;height: 0.4rem;background-color: aqua">
<img id="testImg" src="static/imgs/pictures/a1.jpg" ref="imgRef"
     style="display: block;max-width: 100%">
</div>
<button onclick="cropImage()" style="display:block;height: 0.1rem;width: 0.1rem">裁切</button>

<script type="text/javascript">
    import Cropper from 'cropperjs';
    import 'cropperjs/dist/cropper.css';
    const testImg = document.getElementById('testImg');
    //创建dom
    // this.createElement()
    //初始化裁剪对象
    this.cropper = new Cropper(testImg, {
        aspectRatio: 1 / 1, // 裁剪框比例 默认NaN
        // aspectRatio: 1/1,
        autoCropArea:  0.8, // 默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
        viewMode: 2, //显示模式
        guides: true, // 类型：Boolean，默认值true。是否在剪裁框上显示虚线。
        cropBoxResizable: true, //是否通过拖动来调整剪裁框的大小
        cropBoxMovable: true, //是否通过拖拽来移动剪裁框。
        dragCrop: false,
        dragMode: 'move', //‘crop’: 可以产生一个新的裁剪框3 ‘move’: 只可以移动3 ‘none’: 什么也不处理
        center: true, // 默认true  是否显示裁剪框 中间的+
        zoomable: true, //是否允许放大图像。
        zoomOnTouch: true, //是否可以通过拖动触摸来放大图像。
        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
        rotatable: true, // 类型：Boolean，默认值true。是否允许旋转图片
        scalable: true,
        background: false, // 类型：Boolean，默认值true。是否在容器上显示网格背景
        checkOrientation: false,
        checkCrossOrigin: false, // 类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。
        toggleDragModeOnDblclick: true, // 认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式
        ready: function () {
            if (opt.aspectRatio == 'Free') {
                let cropBox = _this.cropper.cropBox
                cropBox.querySelector('span.cropper-view-box').style.outline =
                    'none'
                _this.cropper.disable()
            }
        },
    })

</script>
</body>
</html>